<template>
    <div class="plant" :style="plantStyle">
        <img :src="plant.image" :alt="plant.name" />

        <!-- 豌豆射手的豌豆 -->
        <div
            v-if="plant.name === '豌豆射手' || plant.name === '双发射手'"
            class="pea"
            v-show="isShooting"
            :class="{ 'ice-pea': plant.name === '寒冰射手' }"
        ></div>

        <!-- 双发射手的第二个豌豆 -->
        <div
            v-if="plant.name === '双发射手'"
            class="pea second-pea"
            v-show="isShooting"
        ></div>

        <!-- 樱桃炸弹的爆炸倒计时 -->
        <div v-if="plant.name === '樱桃炸弹'" class="countdown">
            {{ countdown }}
        </div>

        <!-- 土豆地雷的准备状态 -->
        <div v-if="plant.name === '土豆地雷' && !isReady" class="mine-status">
            准备中...
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from "vue";

const props = defineProps({
    plant: {
        type: Object,
        required: true,
    },
    row: {
        type: Number,
        required: true,
    },
    col: {
        type: Number,
        required: true,
    },
    zombies: {
        type: Array,
        required: true,
    },
});

const emit = defineEmits(["attack", "remove"]);

const isShooting = ref(false);
const countdown = ref(3);
const isReady = ref(false);
let shootInterval;
let countdownInterval;
let readyTimeout;

const plantStyle = {
    top: `${props.row * 20}%`,
    left: `${props.col * 11.11}%`,
};

// 检查是否有僵尸在同一行
const hasZombieInRow = () => {
    return props.zombies.some(
        (zombie) =>
            zombie.row === props.row &&
            zombie.x > props.col * 60 &&
            zombie.x < 800 // 修改为整个屏幕宽度
    );
};

// 检查是否有僵尸在植物上
const hasZombieOnPlant = () => {
    return props.zombies.some(
        (zombie) =>
            zombie.row === props.row &&
            zombie.x > props.col * 60 &&
            zombie.x < (props.col + 1) * 60
    );
};

const shoot = () => {
    if (
        (props.plant.name === "豌豆射手" ||
            props.plant.name === "双发射手" ||
            props.plant.name === "寒冰射手") &&
        hasZombieInRow()
    ) {
        isShooting.value = true;

        // 找到同一行最近的僵尸
        const zombiesInRow = props.zombies.filter(
            (zombie) =>
                zombie.row === props.row &&
                zombie.x > props.col * 60 &&
                zombie.x < 800
        );

        if (zombiesInRow.length > 0) {
            // 按距离排序
            zombiesInRow.sort((a, b) => a.x - b.x);
            const targetZombie = zombiesInRow[0];

            // 根据植物类型发射不同的攻击
            if (props.plant.name === "豌豆射手") {
                emit("attack", {
                    row: props.row,
                    col: props.col,
                    damage: 20,
                    zombieId: targetZombie.id,
                });
            } else if (props.plant.name === "双发射手") {
                // 双发射手发射两次攻击
                emit("attack", {
                    row: props.row,
                    col: props.col,
                    damage: 20,
                    zombieId: targetZombie.id,
                });

                setTimeout(() => {
                    emit("attack", {
                        row: props.row,
                        col: props.col,
                        damage: 20,
                        zombieId: targetZombie.id,
                    });
                }, 200);
            } else if (props.plant.name === "寒冰射手") {
                // 寒冰射手造成伤害并减速
                emit("attack", {
                    row: props.row,
                    col: props.col,
                    damage: 15,
                    freezeDuration: 3000, // 冰冻3秒
                    zombieId: targetZombie.id,
                });
            }

            setTimeout(() => {
                isShooting.value = false;
            }, 500);
        }
    }
};

// 监听僵尸数组变化
watch(
    () => props.zombies,
    () => {
        // 移除向日葵在僵尸数组变化时产生阳光的代码
        // 只在定时器中产生阳光
    },
    { deep: true }
);

onMounted(() => {
    if (props.plant.name === "豌豆射手") {
        shootInterval = setInterval(shoot, 2000);
    } else if (props.plant.name === "双发射手") {
        shootInterval = setInterval(shoot, 1500); // 双发射手攻击更快
    } else if (props.plant.name === "寒冰射手") {
        shootInterval = setInterval(shoot, 2500); // 寒冰射手攻击较慢
    } else if (props.plant.name === "向日葵") {
        // 向日葵每24秒产生一次阳光
        shootInterval = setInterval(() => {
            // 检查游戏是否暂停
            if (props.zombies && Array.isArray(props.zombies)) {
                emit("attack", {
                    row: props.row,
                    col: props.col,
                    type: "sun",
                });
            }
        }, 24000); // 24秒产生一次阳光，更接近原版游戏
    }
});

onUnmounted(() => {
    if (shootInterval) {
        clearInterval(shootInterval);
    }
});

defineExpose({
    shoot,
});
</script>

<style scoped>
.plant {
    position: absolute;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plant img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pea {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #4caf50;
    border-radius: 50%;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    animation: shoot 1s linear;
}

.ice-pea {
    background: #a0e6ff;
    box-shadow: 0 0 10px #a0e6ff;
}

.second-pea {
    animation-delay: 0.2s;
    top: 30%; /* 第二个豌豆位置偏上 */
}

@keyframes shoot {
    from {
        left: 100%;
    }
    to {
        left: 200%;
    }
}

.countdown {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 14px;
}

.mine-status {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}
</style>
